<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>商品详情页</title>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>

</head>

<body bgcolor="#F0F8FF">

<div class="page" >
    <br>
    <ul id="jsddm">
        <li>
            <a href="../index/index.jsp">首页</a>
        </li>
        <li onmouseover="showSubMenu(this)" onmouseout="hideSubMenu(this)">
            <a>商品分类</a>
            <ul>
                <li><a href="../index/showGoodsByType?typeid=101">服饰</a></li>
                <li><a href="../index/showGoodsByType?typeid=102">食品</a></li>
                <li><a href="../index/showGoodsByType?typeid=103">书籍</a></li>
                <li><a href="../index/showGoodsByType?typeid=104">科技</a></li>
                <li><a href="../index/showGoodsByType?typeid=105">日用</a></li>
            </ul>
        </li>
        <li onmouseover="showSubMenu(this)" onmouseout="hideSubMenu(this)">
            <a href="../user/showcar">我的购物车</a>

        </li>
        <li>
            <a href="../user/showorder">我的订单</a>
        </li>
        <li onmouseover="showSubMenu(this)" onmouseout="hideSubMenu(this)">
            <a>个人中心</a>
            <ul>
                <li><a href="../user/cusindex.jsp">个人中心</a></li>
                <li><a href="../user/logout">退出登录</a></li>
            </ul>
        </li>
        <li>
            <form action="../index/searchgoods" method="post">
                <input type="text" name="find_goods" placeholder="请输入商品名"
                       style="width: 100px;height: 30px;border:1px solid #000000;">
                <input type="submit" name="submit" value="搜索" style="border:1px solid #000000;width: 40px;height: 25px">
            </form>
        </li>
    </ul>
    <script type="text/javascript">
        //显示子菜单
        function showSubMenu(li) {
            var subMenu = li.getElementsByTagName("ul")[0];
            subMenu.style.display = "block";
        }

        //隐藏子菜单
        function hideSubMenu(li) {
            var subMenu = li.getElementsByTagName("ul")[0];
            subMenu.style.display = "none";
        }

        window.onload = function () {
            //需求：鼠标放到小盒子上，让大盒子里面的图片和我们同步等比例移动。
            //技术点：onmouseenter==onmouseover 第一个不冒泡
            //技术点：onmouseleave==onmouseout  第一个不冒泡
            //步骤：
            //1.鼠标放上去显示盒子，移开隐藏盒子。
            //2.老三步和新五步（黄盒子跟随移动）
            //3.右侧的大图片，等比例移动。

            //0.获取相关元素
            var box = document.getElementsByClassName("box")[0];
            var small = box.firstElementChild || box.firstChild;
            var big = box.children[1];
            var mask = small.children[1];
            var bigImg = big.children[0];

            //1.鼠标放上去显示盒子，移开隐藏盒子。(为小盒子绑定事件)
            small.onmouseenter = function () {
                //封装好方法调用：显示元素
                show(mask);
                show(big);
            }
            small.onmouseleave = function () {
                //封装好方法调用：隐藏元素
                hide(mask);
                hide(big);
            }

            //2.老三步和新五步（黄盒子跟随移动）
            //绑定的事件是onmousemove，而事件源是small(只要在小盒子上移动1像素，黄盒子也要跟随)
            small.onmousemove = function (event) {
                //想移动黄盒子，必须知道鼠标在small中的位置。x作为mask的left值，y作mask的top值。
                //新五步
                event = event || window.event;
                var pagex = event.pageX || scroll().left + event.clientX;
                var pagey = event.pageY || scroll().top + event.clientY;
                //让鼠标在黄盒子最中间，减去黄盒子宽高的一半
                var x = pagex - box.offsetLeft - mask.offsetWidth / 2;
                var y = pagey - box.offsetTop - mask.offsetHeight / 2;
                //限制换盒子的范围
                //left取值为大于0，小盒子的宽-mask的宽。
                if (x < 0) {
                    x = 0;
                }
                if (x > small.offsetWidth - mask.offsetWidth) {
                    x = small.offsetWidth - mask.offsetWidth;
                }
                //top同理。
                if (y < 0) {
                    y = 0;
                }
                if (y > small.offsetHeight - mask.offsetHeight) {
                    y = small.offsetHeight - mask.offsetHeight;
                }
                //移动黄盒子
                console.log(small.offsetHeight);
                mask.style.left = x + "px";
                mask.style.top = y + "px";

                //3.右侧的大图片，等比例移动。
                //如何移动大图片？等比例移动。
                //    大图片/大盒子 = 小图片/mask盒子
                //    大图片走的距离/mask走的距离 = （大图片-大盒子）/（小图片-黄盒子）
                //                var bili = (bigImg.offsetWidth-big.offsetWidth)/(small.offsetWidth-mask.offsetWidth);

                //大图片走的距离/mask盒子都的距离 = 大图片/小图片
                var bili = bigImg.offsetWidth / small.offsetWidth;

                var xx = bili * x;
                var yy = bili * y;


                bigImg.style.marginTop = -yy + "px";
                bigImg.style.marginLeft = -xx + "px";
            }

        }
    </script>

    <div class="content">
        <div class="zuo">

            <div class="fangshi">
                <h1>热销榜</h1>
                <br>&nbsp;
                <% int i = 1; %>
                <c:forEach items="${goodsList_sales}" var="vo">
                    <a href="../goods/byPage?gid=${vo.gid}">
                        <img src="images/1.<% out.print(i++);%>.jpg"> ${vo.gname}
                    </a><br><br>&nbsp;
                </c:forEach>
            </div>

            <br>

           <div class="fangshi">
                <h1>热搜榜</h1>
                <br>&nbsp;
                <% i = 1; %>
                <c:forEach items="${goodsList_search}" var="vo">
                    <a href="../goods/byPage?gid=${vo.gid}">
                        <img src="images/1.<% out.print(i++);%>.jpg"> ${vo.gname}
                    </a><br><br>&nbsp;
                </c:forEach>
            </div>

            <br>


            <div class="fangshi">
                <h1>猜你喜欢</h1>
                <br>&nbsp;
                <% i = 1; %>
                <c:forEach items="${goodsList_clike}" var="vo">
                    <a href="../goods/byPage?gid=${vo.gid}">
                        <img src="images/1.<% out.print(i++);%>.jpg"> ${vo.gname}
                    </a><br><br>&nbsp;
                </c:forEach>
                <br><br>
            </div>
            <br>
        </div>
        <br>
        <div class="you">



            <div class="zhuanti" style="text-align: center">
                <form action="inCar" method="post">
                    <div class="zhuanti">
                        <div class="zhuanti1">
                            <a href=""> <img src="../img/${gList[0].picture}" height="350" width="350"></a>
                        </div>

                        <div class="zhuanti2" style="border: none">
                            <br>
                            <p class="goodsname">${gList[0].gname}</p>
                            <br>
                            <p class="goodsxq">&nbsp;&nbsp;${gList[0].gdetail}</p>
                            <br>
                            <p class="goodsname">商品销量：${gList[0].sales}</p>
                            <p class="goodsname">浏览量：${gList[0].searchnum}</p>
                            <p class="goodsname">库存量：${gList[0].gstore}</p>
                            <br>
                            <p class="goodsprice">商品价格：${gList[0].gprice}</p>
                            <br>
                            <input type="submit" name="submit" value="加入购物车"
                                   style="border:1px solid #000000;width: 100px;height: 50px;font-size: 20px">
                                                        <br><br>
                        </div>
                    </div>
                </form>
            </div>



            <br>
            <br>
            <br>
            <br>
            <br>
            <%i = 2;%>
            <div class="zhuanti" style="border-top:5px solid #7d0b08;border-bottom:5px solid #7d0b08;">
                <div style="width: 740px; border-left:5px solid #7d0b08;border-right:5px solid #7d0b08;">
                    <br>
                    <p style="font-family:楷体; font-size: 24px; color: #7d0b08;position: relative;left: 10px;" ;>相似推荐</p>
                    <br/>
                </div>
                <c:forEach items="${goodsList_random}" var="vo">
                    <div class="zhuanti<%if(i==1) i=2;else if(i==2) i=1;out.print(i);%>" style="border-bottom: none">
                        <br>
                        <a href="../goods/byPage?gid=${vo.gid}">
                            <img src="../img/${vo.picture}" height="200" width="200"></a><br>
                        <a href="../goods/byPage?gid=${vo.gid}"><p class="goodsname">${vo.gname}</p></a>
                        <a href="../goods/byPage?gid=${vo.gid}"><p class="goodsprice">${vo.gprice}</p></a>
                        <br>
                    </div>
                </c:forEach>
            </div>
        </div>
        <br>
        <div class="clearit"></div>
    </div>
</div>
    <br>
<div>
    <p class="banquan">&nbsp;</p>
    <p class="banquan">版权所有：刘艺杰、安森泰、张恒超、卢晓丹、贾文婷 2021-现在</p>
    <a href="mailto:2629145453@qq.com"><p class="banquan">联系我们</p></a>
    <p class="banquan">&nbsp;</p>
</div>

</body>
</html>
